// import React, { useEffect, useState } from 'react'
// import { useLocation } from 'react-router-dom'
// import { Image } from 'react-vant';

// interface MYPROPS {

// }

// interface DETILEDATATYPE {
//   user?: string,
//   id?: string,
//   img?: string,
//   title?: string
// }

// export default function Car() {
//   const location = useLocation()
//   const [detileData, setdetileData] = useState<DETILEDATATYPE>({})

//   useEffect(() => {
//     setdetileData(location.state as DETILEDATATYPE)

//   }, [])

//   useEffect(() => {
//     console.log(detileData,'detileData');

//   }, [detileData])

//   return (
//     <div>
//       <div className="demo-image">
//         {/* <Image width="100" height="100" src={detileData.img} /> */}
//         <p>{detileData.user}</p>
//       </div>
//     </div>
//   )
// }

import React, { useEffect, useState } from 'react'
import { useLocation } from 'react-router-dom'
import { ProductCard, Tag, Button } from 'react-vant';
import { useSelector,useDispatch } from 'react-redux'
import { ALLSTATE } from '../../../types/store.d'
import { SubmitBar, Checkbox } from 'react-vant';


interface DETILEDATATYPE {
  user?: string,
  id?: string,
  img?: string,
  title?: string,
  price?:string,
  isCheck?:boolean
}


export default function Car() {
  const ispatch = useDispatch()
  //使用仓库hook获取仓库数据
  const carlist = useSelector((state: ALLSTATE) => {
    return state.carlist
  })
  console.log(carlist);

  const hanClickCheck = (e: boolean, id: string) => {
    let obj = {
      id: id,
      value: e
    }
    
  }
  
  const handleAllCheck = (e:boolean)=>{
      console.log(e);
      
  }

  return (
    <div>
      {
        carlist && carlist.map((item:DETILEDATATYPE, index:number) => {
          return <ProductCard
            key={index}
            num="2"
            price={item.price}
            desc={item.user}
            title={item.title}
            thumb={
              <>
              <Checkbox key={index} onChange={(e) => hanClickCheck(e, item.id)} checked={item.isCheck}></Checkbox>
              <img src={item.img}></img>
              </>
            }

            footer={
              <>
                <Button >
                  --
                </Button>
                <Button >
                  ++
                </Button>
              </>
            }
           
          />
        })
      }

<div className="demo-submit-bar">
    <SubmitBar
      price="3050"
      buttonText="提交订单"
      tip={
        <>
          你的收货地址不支持同城送,
          <span style={{ color: '#1989fa' }}>修改地址</span>
        </>
      }
    >
      <Checkbox onChange={(e)=>handleAllCheck(e)}>全选</Checkbox>
    </SubmitBar>
    </div>

    </div>
  )
}
